<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>svg</title>
    <style>
        path {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
        }

        .grow{
            animation: dash 2s linear forwards;
        }

        @keyframes dash {
            to {
                stroke-dashoffset: 0;
            }
        }
    </style>
</head>
<body>
<svg width="700" height="350" xmlns="http://www.w3.org/2000/svg">
    <g class="tree">
        <path d="m106,93c3,0 4.31001,0.33749 7,2c3.60901,2.23049 6.71413,6.21168 9,9c0.89659,1.09367 3,2 3,3c0,1 -0.49345,1.87856 -1,5c-0.32036,1.97418 -0.96855,5.41208 -3,9c-0.69678,1.23065 -1,4 -1,8c0,3 0,4 0,7c0,2 0.69255,5.186 2,7c0.8269,1.14726 2,4 2,6c0,4 0,6 0,8c0,2 0,5 0,8c0,3 -1,7 -1,10c0,7 0,10 0,15c0,4 0.82443,6.09789 2,8c2.10292,3.4026 1.1731,5.85274 2,7c1.30745,1.814 1,3 1,5c0,2 0,4 0,6c0,2 -1.61731,5.07613 -2,6c-0.5412,1.30656 -3.87856,3.49345 -7,4c-2.96126,0.48055 -7,0 -12,0c-8,0 -13.16119,0.2536 -18,-3c-4.14924,-2.78995 -7.23296,-3.58972 -11,-6c-5.39359,-3.45099 -10.76291,-7.13878 -14,-16c-2.4263,-6.64177 -3.15977,-10.80232 0,-16c2.59731,-4.27246 9.891,-8.22313 22,-14c10.90556,-5.20274 26.49663,-12.73625 41,-16c19.60938,-4.41277 35.05527,-4.50844 55,-7c20.06776,-2.50693 37.9556,-7.13666 47,-10c9.9534,-3.15112 16.06985,-4.62152 19,-8c2.07193,-2.38896 2,-5 2,-8c0,-1 -0.71411,-3.21167 -3,-6c-0.89661,-1.09367 -1.38062,-4.44353 -7,-6c-1.92743,-0.53387 -7,-3 -14,-3c-3,0 -8,0 -10,0c-7,0 -9.38487,1.84787 -16,6c-3.49219,2.19194 -8.44798,5.44547 -15,13c-4.63298,5.34187 -6.69981,9.16617 -14,22c-2.88301,5.06836 -3.69255,10.186 -5,12c-0.8269,1.14726 -1.92386,3.61731 -1,4c1.30656,0.5412 2.18875,-1.41528 3,-2c2.56537,-1.84901 2.90283,-5.2242 5,-6c3.867,-1.4305 5.29289,-2.29289 6,-3c1.41422,-1.41422 3,1 4,2c4,4 7.21167,7.71413 10,10c12.03038,9.86255 15.76393,13.76393 18,16c2.23607,2.23607 2.82375,4.48625 5,5c0.97325,0.22975 1.4595,-1.0535 1,-3c-0.51375,-2.17625 -2,-6 -2,-13c0,-2 -1.14806,-3.22836 0,-6c0.5412,-1.30656 2,-1 3,-1l1,0l0,1l1,0" id="svg_8" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"></path>
        <path d="m343,70c0,1 0.39417,4.01947 0,8c-0.50244,5.0742 -2.78394,16.11098 -8,26c-4.80331,9.10649 -8.83707,19.11604 -16,29c-5.8681,8.09724 -7.96854,13.41208 -10,17c-0.69678,1.23065 -2,2 -1,2c1,0 2.23462,-1.15224 3,-3c1.0824,-2.61313 3.31812,-4.59012 6,-7c5.80942,-5.22023 11.23273,-9.73325 17,-15c5.22144,-4.7683 10.97736,-10.09544 15,-11c4.97479,-1.11867 7,-2 10,-2c1,0 1,1 1,3c0,2 0,5 0,7c0,2 0.68927,4.08026 0,7c-1.54123,6.52875 -8,10 -12,14c-4,4 -10.07748,7.03891 -16,8c-6.24289,1.01308 -11.23401,3.49295 -16,6c-3.19098,1.67856 -5.58578,1.58578 -7,3c-0.70709,0.70711 -1,1 -1,3c0,1 0,3 0,6c0,4 -1.53073,8.30449 0,12c1.0824,2.61313 3,6 3,8c0,1 0,2 0,3c0,1 0,2 0,4c0,2 0.65482,5.17697 -1,10c-1.45139,4.23007 -3,9 -3,11c0,2 -0.70709,4.29289 0,5c0.70709,0.70711 5.12631,1.32375 12,0c5.28799,-1.01837 18.44205,-6.47672 30,-10c11.63684,-3.54733 22.81888,-7.23181 33,-15c10.81332,-8.25056 16.91034,-13.09831 19,-20c0.86935,-2.87128 0.4595,-7.0535 0,-9c-0.51373,-2.17625 -4.81146,-5.13464 -7,-8c-1.91949,-2.51308 -4,-5 -7,-7c-3,-2 -3.82376,-4.48625 -6,-5c-0.97324,-0.22975 -2,0 -3,0c-1,0 -2,0 -3,0c-1,0 -1.1731,0.85274 -2,2c-1.30746,1.814 -3,4 -3,9c0,2 -0.19385,9.03044 1,16c0.8609,5.02582 2.724,12.22273 6,16c4.63297,5.34187 8.19028,8.88152 10,12c1.12234,1.93399 1,3 1,4c0,1 0,4 0,6c0,3 0,10 0,13c0,7 0,16 0,29c0,7 0,10 0,17c0,4 -0.4588,5.69345 -1,7c-0.38269,0.92389 0,0 1,0l1,-1l1,-1" id="svg_9" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"></path>
        <path d="m449,129c0,1 0,5 0,10c0,6 0,15 0,24c0,11 0,20 0,27c0,6 0,11 0,15c0,2 0,4 0,5c0,1 -1,1 -1,1c0,-1 -1.49829,-4.93796 -2,-11c-0.57736,-6.97615 -2,-16 -2,-27c0,-9 0,-18 0,-23c0,-3 -0.17557,-7.0979 1,-9c2.62866,-4.25325 4,-5 6,-7c2,-2 4,-3 7,-3c3,0 7,0 10,0c2,0 7.04132,-0.15277 11,1c3.03619,0.88414 4.37201,2.3851 8,5c1.14728,0.8269 2,2 2,3c0,2 0,3 0,4c0,2 0.4588,5.69345 1,7c0.76538,1.84776 1.83209,4.37875 6,6c6.78485,2.63921 11.69025,7.01297 20,9c8.80707,2.10596 16,3 25,3c9,0 16,0 22,0c4,0 6.58582,-1.41422 8,0c0.70709,0.70711 1,1 1,2c0,1 0,3 0,4c0,2 1.90778,4.49623 6,5c2.97754,0.36655 6.64752,1.97252 11,3c7.78601,1.83803 13.50659,-0.89528 21,-5c8.77039,-4.80421 12.14386,-11.90654 16,-18c3.1181,-4.92722 2.74567,-9.82132 0,-14c-4.42725,-6.73793 -11.58978,-12.44043 -18,-18c-7.55457,-6.55202 -14.92896,-14.92892 -22,-22c-7.07104,-7.07107 -16.30359,-12.37257 -23,-16c-6.34058,-3.43468 -9.30804,-5.90965 -13,-8c-3.58795,-2.03145 -6,-1 -10,-1c-2,0 -5.3045,-1.53073 -9,0c-3.91968,1.62359 -5.91876,5.34508 -8,10c-2.04083,4.56453 -5.97253,8.6475 -7,13c-0.68927,2.91975 0,5 0,9c0,2 -0.76538,4.15224 0,6c0.5412,1.30656 2.2594,2.99808 6,5c4.49567,2.40602 9.87854,1.49345 13,2c4.93542,0.80092 10,1 14,1c6,0 13,2 20,2c11,0 20,0 27,0c7,0 10,0 12,0c1,0 2.22974,-2.02675 2,-3c-0.51373,-2.17625 -2,-5 -6,-7c-2,-1 -5.25659,-0.41885 -10,-2c-4.74341,-1.58115 -5.64117,-5.55037 -10,-8c-4.69458,-2.63833 -8.96393,-5.08557 -16,-8c-4.97522,-2.06081 -6.87854,-3.49346 -10,-4c-0.98706,-0.16018 -0.61731,1.07612 -1,2c-1.0824,2.61313 -2,3 -2,4c0,1 0,2 0,3l0,1" id="svg_10" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"></path>
    </g>
</svg>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    var $paths = $('.tree > path')
    var curIndex = 1

    // 默认第1个path加上grow自动执行动画
    $paths.eq(0).addClass('grow')

    // 从第2个path开始通过定时器控制执行动画，这里的2000秒与css动画中2s对应
    var growAnimateTimer = setInterval(function () {
        $paths.eq(curIndex).addClass('grow')
        curIndex++

        if(curIndex === $paths.length) {
            clearInterval(growAnimateTimer)
        }
    }, 2000)
</script>
</body>
</html>